import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Link, hashHistory} from 'react-router'
import {Menu, Dropdown, Button, Modal, message, Icon, Row, Col} from 'antd'
import {brandName} from '@config'
import {logout} from '@apis/common'
import EditPassword from './editPassword'

const {confirm} = Modal

@connect((state, props) => ({
    config: state.config,
    staffResponse: state.staffResponse,
}))
export default class Header extends Component {
    // 初始化页面常量 绑定事件方法
    constructor(props, context) {
        super(props)
        this.state = {
            loading: false,
            editPasswordMadalIsOpen: false,
        }
        this.handleLogout = this.handleLogout.bind(this)
    }

    // 组件已经加载到dom中
    componentDidMount() {

    }

    // 登出
    handleLogout() {
        const {config} = this.props
        const self = this
        confirm({
            title: '提示',
            content: '确认退出登录吗？',
            onOk() {
                sessionStorage.clear()
                config.staff = {}
                hashHistory.push('/login')
            },
        })
    }

    // 取消修改密码弹窗
    cancel = () => {
        this.setState({editPasswordMadalIsOpen: false})
    }

    // 确认修改密码弹窗
    handleOk = () => {
        this.setState({editPasswordMadalIsOpen: false})
    }

    // 修改密码弹窗显示
    editPasswordOpen = () => {
        this.setState({editPasswordMadalIsOpen: true})
    }

    render() {
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo')) || {}
        const userCenter = (
            <Menu className="nav-dropmenu">
                <Menu.Item key="1">
                    <span className="label">
                                <Icon type="user"/>姓名： {userInfo.user_name || '---'}</span>
                </Menu.Item>
                <Menu.Divider/>
                <Menu.Item key="2">
                    <span type="primary" size="small" onClick={this.editPasswordOpen}>
                        修改密码
                    </span>
                </Menu.Item>
                <Menu.Divider/>
                <Menu.Item key="3">
                    <span type="primary" size="small" onClick={this.handleLogout}>退出登录</span>
                </Menu.Item>
            </Menu>
        )
        const {gMenuList, topMenuReskey} = this.props
        const topKey = topMenuReskey
        return (
            <header id="navbar">
                <div id="navbar-container" className="boxed">
                    <Row className="row">
                        <Col span={20}>
                            <div className="navbar-brand" title={brandName}>
                                <span className="brand-title">
                                    <span className="brand-text"><span className="logo"/>{brandName}</span>
                                </span>
                            </div>
                        </Col>
                        <Col span={4} className="col">
                            <ul>
                                <li>
                                    <Dropdown overlay={userCenter} style={{width:"100px"}}>
                                        <a className="ant-dropdown-link" style={{fontSize:"18px"}}>
                                            <Icon type="user"/>
                                            {userInfo.user_name}
                                        </a>
                                    </Dropdown>
                                </li>
                            </ul>
                        </Col>
                    </Row>
                </div>
                {
                    this.state.editPasswordMadalIsOpen ?
                        <EditPassword
                            handleOk={this.handleOk}
                            visible={this.state.editPasswordMadalIsOpen}
                            onCancel={this.cancel}
                        />
                        : null
                }
            </header>
        )
    }
}
